<template>
  <onez-view class="onez-input">
    <onez-view class="placeholder" v-if="placeholder_show">{{ placeholder }}</onez-view>
    <template v-if="type == 'radio'">
      <onez-view class="radio in_line" v-for="(opt,index) in info.options" :key="index">
        <onez-button
          class="bt"
          :checked="opt.value == value_"
          @click="sel(opt.value)"
          :width="22"
          :height="22"
          resid="51D73031-80D9-F86D-0100-0AFE7F30FC05#main/radio_1.png"
          mode="switch"
        ></onez-button>
        <onez-view class="label" v-if="opt.label" @click.native="sel(opt.value)">{{opt.label}}</onez-view>
      </onez-view>
    </template>
    <template v-else-if="type == 'switch'">
      <onez-view class="radio in_line">
        <onez-button
          class="bt"
          :checked="value_==1"
          @click="sel(1)"
          :width="22"
          :height="22"
          resid="51D73031-80D9-F86D-0100-0AFE7F30FC05#main/radio_1.png"
          mode="switch"
        ></onez-button>
        <onez-view class="label" @click.native="sel(1)">{{info.name_yes||'是'}}</onez-view>
      </onez-view>
      <onez-view class="radio in_line">
        <onez-button
          class="bt"
          :checked="value_!=1"
          @click="sel(0)"
          :width="22"
          :height="22"
          resid="51D73031-80D9-F86D-0100-0AFE7F30FC05#main/radio_1.png"
          mode="switch"
        ></onez-button>
        <onez-view class="label" @click.native="sel(0)">{{info.name_yes||'否'}}</onez-view>
      </onez-view>
    </template>
    <template v-else-if="type == 'checkbox'"></template>

    <template v-else>
      <input class="input" :type="type" :value="value_" @input="onInput" />
    </template>
  </onez-view>
</template>

<script>
	import onezView from '../onez-view/onez-view.vue'
	import onezButton from '../onez-button/onez-button.vue'
export default {
  name: 'onez-input',
  components: {
  	onezView, onezButton
  },
  data() {
    return {
      placeholder_show: false,
      value_:'',
    };
  },
  props: {
    info: {
      type: Object,
      default: null
    },
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  watch:{
    value(){
      this.value_=this.value;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.value_=this.value;
      this.checkPlaceholder(this.value_);
    },
    checkPlaceholder(value) {
      if (['text', 'password', 'textarea'].indexOf(this.type) == -1) {
        return;
      }
      this.placeholder_show = value.toString().length < 1 && this.placeholder;
    },
    sel(value) {
      this.value_=value;
      this.$emit('input', value);
      this.$forceUpdate();
    },
    onInput(e) {
      let value = e.detail.value;
      this.value_=value;
      this.$emit('input', value);
      this.checkPlaceholder(value);
    }
  }
};
</script>

<style scoped>
.onez-input {
  position: relative;
  display: block;
}
.placeholder {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 5px;
  color: #cdcdcd;
  min-height: 30px;
  line-height: 30px;
  display: block;
  font-size: 16px;
}
.input {
  background: #417a8f;
  border: 1px solid #44bfda;
  border-radius: 5px;
  padding: 0 5px;
  min-height: 30px;
  line-height: 30px;
  color: #fff;
  box-shadow: 0px 0px 1px #417a8f;
  display: block;
  font-size: 16px;
  width: 155px;
  pointer-events: all;
}
.input:focus {
  outline: none;
}
.bg {
}
.label {
  color: #fff;
}
.radio {
  display: inline-block;
  margin-right: 10px;
}
.radio .bt {
  position: relative;
  top: 4px;
  margin-right: 3px;
}
.radio .label {
  display: inline-block;
  cursor: pointer;
}
.in_line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
